<template>
	<view class="container">
		<!-- #ifdef H5 -->
		<uni-header></uni-header>
		<!-- #endif -->

		<view class="com-box">
			<view class="eva-section">
				<view class="e-header">
					<text class="tit">评价</text>
					<text>({{total}})</text>
				</view>

				<view v-for="(item,index) in appraisesList" :key="index" class="eva-box">
					<image class="portrait" :src="item.userImageUrl ? item.userImageUrl : '/static/missing-face.png'" mode="aspectFill"></image>
					<view class="right">
						<text class="name">{{item.userNickName?item.userNickName:('用户' + item.userId)}}</text>
						<text class="con">{{item.content}}</text>
						<view v-if="item.commentPictureArray && item.commentPictureArray.length > 0" class="imgs">
							<image @click="previewImg(item.commentPictureArray, imgIndex)" v-for="(imgItem, imgIndex) in item.commentPictureArray"
							 :key="imgIndex" class="ig" :src="imgItem"></image>
						</view>
						<view class="bot">
							<text class="time">{{$util.sliceTime(item.createTime)}}</text>
							<view class="icon" :class="item.praise ? 'icon-good-fill' : 'icon-good'" @tap="zan(item)"><text style="margin-left: 5px;">{{item.praiseNum}}</text></view>
						</view>
					</view>
				</view>
			</view>

			<!-- #ifdef H5 -->
			<uni-pagination :num='pageNum' :page='pages' @pagechange="pagechange"></uni-pagination>
			<!-- #endif -->
			<uni-load-more class="sp" :status="loadingType"></uni-load-more>
		</view>

		<!-- #ifdef H5 -->
		<uni-footer></uni-footer>
		<!-- #endif -->
	</view>

</template>

<script>
	import uniHeader from '@/components/h5/uni-header.vue'
	import uniFooter from '@/components/h5/uni-footer.vue'
	import uniLoadMore from '@/components/uni-load-more.vue'
	import uniPagination from '@/components/h5/uni-pagination.vue'
	export default {
		components: {
			uniHeader,
			uniFooter,
			uniLoadMore,
			uniPagination
		},
		data() {
			return {
				id: '',
				type: 0,
				appraisesList: [],
				loadingType: 'more',
				pageNum: 1,
				pageSize: 10,
				pages: 0,
				total: 0,
			}
		},
		onLoad(option) {
			this.id = option.id
			this.loadData()
		},
		onReachBottom() {
			this.loadData()
		},
		methods: {
			pagechange(currentPage) {
				console.log(currentPage)
				// ajax请求, 向后台发送 currentPage, 来获取对应的数据
				uni.showLoading({
					title: '正在加载'
				})
				this.pageNum = currentPage
				this.loadData('current')
			},
			//加载商品 ，带下拉刷新和上滑加载
			loadData(type = 'add') {
				//没有更多直接返回
				if (type === 'add') {
					if (this.loadingType === 'nomore') {
						return
					}
					this.loadingType = 'loading'
				} else {
					this.loadingType = 'more'
				}
				if (type === 'refresh') {
					this.pageNum = 1
				}
				this.$api.request('/goods/productCommentPage', {
					productId: this.id,
					type: this.type,
					pageNum: this.pageNum,
					pageSize: this.pageSize
				}, {
					method: 'GET'
				}).then(res => {
					let tempList = res.data.productCommentList
					if (type !== 'add') {
						this.appraisesList = []
					}
					this.total = res.data.total
					this.pages = Math.ceil(res.data.total / this.pageSize)
					this.loadingType = this.pageNum < this.pages ? 'more' : 'nomore'
					this.appraisesList = this.appraisesList.concat(tempList)
					this.pageNum = this.pageNum + 1
					if (type !== 'add') {
						uni.hideLoading()
						uni.stopPullDownRefresh()
					}
				})
			},
			zan(item) {
				this.$api.request('/goods/dianZan', {
					id: item.id
				}).then(res => {
					item.praise = true
					item.praiseNum = item.praiseNum + 1
				})
			},
			previewImg(imgs, index) {
				uni.previewImage({
					current: index,
					urls: imgs
				})
			}
		}
	}
</script>

<style lang="scss">
	/* 评价 */
	.eva-section {
		display: flex;
		flex-direction: column;
		padding: 20upx $base-row-spacing;
		background: #fff;
		margin-top: 20upx;

		.e-header {
			display: flex;
			align-items: center;
			height: 70upx;
			font-size: $base-font-sm + 2upx;
			color: $base-color-light;

			.tit {
				font-size: $base-font-base + 2upx;
				color: $base-color-dark;
				margin-right: 4upx;
			}

			.tip {
				flex: 1;
				text-align: right;
			}

			.icon-arrow_right {
				margin-left: 0;
			}
		}
	}

	.eva-box {
		display: flex;
		padding: 20upx 0;
		border-top: 1upx dashed $base-color-light;

		.portrait {
			flex-shrink: 0;
			width: 80upx;
			height: 80upx;
			border-radius: 100px;
		}

		.right {
			flex: 1;
			display: flex;
			flex-direction: column;
			font-size: $base-font-base;
			color: $base-color-base;
			padding-left: 26upx;

			.con {
				font-size: $base-font-base;
				color: $base-color-dark;
				padding: 20upx 0;
			}

			.imgs {
				.ig {
					width: 190upx;
					height: 190upx;
					padding: 4upx;
				}
			}

			.bot {
				display: flex;
				justify-content: space-between;
				color: $base-color-light;

				.icon-good-fill {
					color: $base-color-warning;
				}
			}
		}
	}

	/* #ifdef H5 */
	@media screen and (min-width: 750px) {

		/* 评价 */
		.eva-section {
			padding: 20px 30px;
			margin: 20px 0;

			.e-header {
				height: 35px;
				font-size: 16px;

				.tit {
					font-size: 18px;
					margin-right: 4px;
				}
			}
		}

		.eva-box {
			padding: 20px 0;
			border-top: 1px dashed $base-color-light;

			.portrait {
				width: 40px;
				height: 40px;
				border-radius: 100px;
			}

			.right {
				font-size: 16px;
				padding-left: 10px;

				.con {
					font-size: 16px;
					padding: 10px 0;
				}

				.imgs {
					.ig {
						width: 100px;
						height: 100px;
						padding: 4px;
					}
				}

				.bot {
					font-size: 16px;
				}
			}
		}
	}

	/* #endif */
</style>
